<template>
  <div class="container">
    <Nav></Nav>

    <HeadNav></HeadNav>

    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
      <el-col :xs="3" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple"></div
      ></el-col>
      <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1"
        ><navMenu></navMenu
      ></el-col>
      <el-col :xs="24" :sm="15" :md="15" :lg="15" :xl="15"
        ><Tabs></Tabs
      ></el-col>
      <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple"></div
      ></el-col>
    </el-row>

    <!-- <el-row>
        <el-col :span="7"></el-col>
        <el-col :span="24"> </el-col>
        <el-col :span="7"></el-col>
      </el-row> -->
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :xs="2" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple"></div
      ></el-col>
      <el-col :xs="17" :sm="16" :md="16" :lg="16" :xl="16"
        ><div class="grid-content bg-purple-light"><miaosha></miaosha></div
      ></el-col>
      <el-col :xs="3" :sm="4" :md="4" :lg="4" :xl="4"
        ><div class="grid-content bg-purple"></div
      ></el-col>
    </el-row>
    <!-- <el-col  :xs="24" :sm="15" :md="15" :lg="15" :xl="12"
          > </el-col>
     -->

    <huodong></huodong>
    <div>
      <paihan></paihan>
    </div>

    <div v-for="item in datalist" :key="item.categoriesId">
      <fenlei
        :categoriesId="item.categoriesId"
        :pageSize="item.pageSize"
        :img="item.img"
        :img_1="item.img_1"
      ></fenlei>
    </div>

    <!-- <fenlei></fenlei>
        <fenlei></fenlei>
        <fenlei></fenlei>
        <fenlei></fenlei>
        <fenlei></fenlei> -->
    <div class="second_content">
      <div class="book2_box">
        <RecBookBox listSort="recommend"></RecBookBox>
      </div>
    </div>
    <div class="first_content">
      <div class="book2_box">
        <RecBookBox listSort="newProduct"></RecBookBox>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../com/components/Common/Nav";
import HeadNav from "../../com/components/Common/HeadNav";
import Tabs from "../../zhuye/Tabs/Tabs";
import navMenu from "../../zhuye/celan/navMenu";
import miaosha from "../../zhuye/zhongbu/miaosha";
import RecBookBox from "../../zhuye/zhongbu/RecBookBox";
import huodong from "../../zhuye/zhongbu/huodong";
import paihan from "../../zhuye/zhongbu/paihanbang";
import fenlei from "../../zhuye/zhongbu/fenlei";
import axios from "axios";
export default {
  components: {
    Nav,
    HeadNav,
    Tabs,
    navMenu,
    miaosha,
    RecBookBox,
    huodong,
    paihan,
    fenlei,
  },
  data() {
    return {
      page: 3,
      datalist: [
        {
          categoriesId: 51,
          pageSize: 6,
          img: require("../../assets/jp.png.webp"),
          img_1: require("../../assets/jiaofu.jpg"),
        },
        {
          categoriesId: 46,
          pageSize: 6,
          img: require("../../assets/wx.png.webp"),
          img_1: require("../../assets/wx_1.jpg"),
        },
        {
          categoriesId: 36,
          pageSize: 6,
          img: require("../../assets/lz.png.webp"),
          img_1: require("../../assets/it_1.jpg"),
        },
        {
          categoriesId: 38,
          pageSize: 6,
          img: require("../../assets/ys.png.webp"),
          img_1: require("../../assets/ys_1.jpg"),
        },
      ],
    };
  },
  //      mounted(){
  // //在mounted 声明周期中创建定时器
  // const timer = setInterval(()=>{
  // 	// 这里调用调获取分类排行榜信息
  // 	let id_1= Math.floor(Math.random() * (5 - 1) + 1);
  //       this.page=id_1
  // }, 5000) // 每两秒执行1次
  // // 通过$once来监听定时器，在beforeDestroy钩子可以被清除
  // this.$once('hook:beforeDestroy',()=>{
  // 	// 在页面销毁时，销毁定时器
  // 	clearInterval(timer)
  // })
  // },
  methods: {},
  created() {
    let id_1 = Math.floor(Math.random() * (5 - 1) + 1);
    this.page = id_1;
    // this.get_gwc();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  /* background-color: #f9fafc; */
}

.miaosha {
  /* background: #dedede; */
  /* width: 66%;
  height: 250px; */
}

/* .grid-content {
  border-radius: 4px;
  min-height: 36px;
} */

.second_content {
}
.first_content {
  margin-top: 600px;
}
</style>
